<template>
  <div>
    <query-page
      ref="detailTable"
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :total="tableTotal"
      :row-class="rowClassFun"
      height="100%"
      row-selection-type="checkbox"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #top-container>
        <p-tabs
          v-model:value="activeTab"
          :is-show-num="false"
          :tab-list="tabList"
        ></p-tabs>
      </template>
      <template #operate="{ record, rowIndex }">
        <a-button type="text" @click="handleEdit(record, rowIndex)"
          >编辑</a-button
        >
      </template>
    </query-page>
  </div>
  <EditOrderDetail
    v-if="editOrderModelVisible"
    v-model="editOrderModelVisible"
    :select-id="selectOrderId"
    :select-row="selectOrderRow"
    @update-row="setOrderData"
  ></EditOrderDetail>
</template>

<script lang="ts" setup>
  import { ref, watch, inject, nextTick } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { getPmsOrderDetailPageReceive } from '@/api/purchaseArrival/arrivalRegistration';
  import { materialType } from '@/config/const';
  import EditOrderDetail from './EditOrderDetail.vue';
  import {
    formRenderConfig,
    formComponentConfig,
  } from '../moduleCommon/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';
  import { baseRenderData } from './baseRenderData';
  import PTabs from '../moduleCommon/p-tabs.vue';

  const selectedKeys = ref([]);
  const activeTab = ref('2');
  const tableTotal = ref(0);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const emits = defineEmits(['select', 'updateSelect']);
  const pmsReceiveRow = inject('pmsReceiveRow');

  const tabList = ref(materialType);
  // 渲染检索项
  const formRenderKeys = ref<any[]>([]);
  // 当前表格要渲染哪些值
  const tableRenderKeys = ref<any[]>([]);
  const editOrderModelVisible = ref(false);
  const selectOrderId = ref(null);
  const detailTable = ref(null);
  const selectOrderRow = ref({});

  const getData = async (queryInfo: object) => {
    queryInfo = detailTable.value.getStatus();
    selectedKeys.value = [];
    emits('select', []);
    queryInfo = {
      ...queryInfo,
      mdsVendorCode: pmsReceiveRow?.value.mdsVendorCode,
      ordStatus: '25',
      frozenStatus: '0',
      hasSubmitOtherSystem: 'N',
      mdsItemType: activeTab?.value,
      dataQueryType: '1',
      isEqualFlag: '1',
      secretLevel: pmsReceiveRow?.value.secretLevel,
    };
    renderData.value = [];
    isLoading.value = true;
    const { data } = await getPmsOrderDetailPageReceive(queryInfo);
    renderData.value = data.list;
    tableTotal.value = data.total;
    isLoading.value = false;
  };
  const selectionChange = () => {
    emits(
      'select',
      renderData.value.filter((row) => selectedKeys.value.includes(row.id))
    );
  };

  const handleEdit = (row) => {
    selectOrderId.value = row.id;
    selectOrderRow.value = row;
    editOrderModelVisible.value = true;
  };
  const rowClassFun = (val) => {
    return val.raw.urgencyDegree ? 'green' : '';
  };
  const setOrderData = (newRow) => {
    renderData.value = renderData.value.map((item) => {
      if (item.id === selectOrderId.value) {
        item = {
          ...item,
          ...newRow,
        };
      }
      return item;
    });
    emits(
      'select',
      renderData.value.filter((row) => selectedKeys.value.includes(row.id))
    );
  };
  // 初期话
  const initData = () => {
    // 获取列表的renderKey(列表渲染项)
    tableRenderKeys.value = [
      ...baseRenderData.tableRenderKeys[activeTab.value],
    ];
    // 获取筛选form的renderKey(表单渲染项)
    formRenderKeys.value = [...baseRenderData.formRenderKeys[activeTab.value]];
  };
  watch(
    () => activeTab.value,
    () => {
      initData();
      selectedKeys.value = [];
      emits('select', []);
      nextTick(() => {
        getData();
      });
    }
  );

  const init = () => {
    initData();
  };
  init();
</script>

<style lang="less" scoped>
  .purchase-order-detail-inquire-container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 32px);
    margin: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
  }

  /deep/ .green .arco-table-td {
    background-color: #8fda94 !important;
  }

  /deep/ .green :nth-child(1).arco-table-td {
    background-color: #fff !important;
  }

  /deep/ .green :last-child.arco-table-td {
    background-color: #fff !important;
  }
</style>
